<template>
    <Div class="account">
        <Row>
            <Col :lg="7" :md="12" :sm="13" :xs="24" style="margin-right:20px">
                <Card>
                    <i class="money"></i>
                    <Div>
                        <p>可用金额</p>
                        <h1>{{ Tmoney }}元</h1>
                    </Div>
                </Card>
            </Col>
            <Col :lg="7" :md="12" :sm="13" :xs="24">
                <Card>
                    <i class="money1"></i>
                    <Div>
                        <p>可提现金额 <Button @click="applyShow(0)">提现</Button></p>
                        <h1>{{ money }}元</h1>
                    </Div>
                </Card>
            </Col>
        </Row>
        <Row>
            <Form :model="searchForm">
                <FormItem>
                    <Label>提现状态</Label>
                    <Select v-model="searchForm.status" clearable placeholder="全部">
                        <Option v-for="(item,index) in s_list" :value="item.id" :key="index" :label="item.name"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Label>提现时间</Label>
                    <Date-picker format="yyyy-MM-dd" placement="bottom-end" placeholder="开始时间" style="width: 200px" @on-change="handleBalbnceTimeStart"></Date-picker>
                    -
                    <Date-picker format="yyyy-MM-dd" placement="bottom-end" placeholder="结束时间" style="width: 200px" @on-change="handleBalbnceTimeEnd"></Date-picker>
                </FormItem>
                <Button icon="ios-search" @click="handleBalbnceSearch">查询</Button>
            </Form>
        </Row>
        <Row>
            <Table :columns="account_title" :data="account_data" ></Table>
            <Page :total="page.total" :current.sync="page.current" :page-size="page.size" show-elevator show-total class-name="page" @on-change="handleBalbncePage"></Page>
        </Row>
        <Modal v-model="apply" class-name="apply" :transfer="false" title="提现申请" width="400">
            <Form :model="dialog" :label-width="90" ref="dialog">
                <FormItem label="提现方式：">
                    {{ dialog.apply_pay}}
                </FormItem>
                <FormItem label="收款人：">
                    {{ dialog.apply_name}}
                </FormItem>
                <FormItem label="收款账户：">
                    {{ dialog.apply_account}}
                </FormItem>
                <FormItem label="提现金额：">
                    ￥<Input placeholder="输入提现金额" v-if="is_money" size="small" v-model="dialog.apply_money"></Input><span v-else>{{ dialog.apply_money }}</span>
                </FormItem>
            </Form>
            <Div slot="footer">
                <Button type="primary" @click="handleBalbnceMoney">确定提现</Button>
            </Div>
        </Modal>
    </Div>
</template>

<script>
import { mapGetters } from 'vuex'
import { balanceInit, balanceInitMoney, balabcePage, balanceSearch, balanceMoney, balanceWitness } from '@/api/account'

export default {
    data(){
        return{
            apply: false,
            is_money: false,
            money: '0.00',
            Tmoney: '0.00',
            searchForm: {
                status: '',
                start: '',
                end: ''
            },
            dialog: {
                apply_pay:'',
                apply_name: '',
                apply_account: '',
                apply_money: ''
            },
            page: {
                total: 0,
                size: 1,
                current: 1
            },
            s_list:[],
            account_title:[
                {
                    title: '提现流水号',
                    align: 'center',
                    key: 'withdraw_no'
                },
                {
                    title: '提现时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '提现金额',
                    align: 'center',
                    key: 'money'
                },
                {
                    title: '提现状态',
                    align: 'center',
                    render:(h, params) => {
                        if(params.row.status === 0){
                            return h('span',{
                                style:{
                                    color: '#229f16'
                                }
                            },'提现成功')
                        } else if (params.row.status === 1) {
                            return h('span',{
                                style:{
                                    color: '#ed3f14'
                                }
                            },'提现失败')
                        } else if (params.row.status === 3) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#333'
                                    }
                                }, '待确认'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        } else if (params.row.status === 5) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#2d8cf0'
                                    }
                                }, '待处理'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        } else if (params.row.status === 6) {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#f60'
                                    }
                                }, '处理中'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click:() => {
                                            this.handleUpdate(params.row.id, params.index)
                                        }
                                    }
                                },'更新状态')
                            ])
                        }
                    }
                }
            ],
            account_data:[]
        }
    },
    methods:{
        init() {
            balanceInit(this.id).then(response => {
                if (response.data.code === 0) {
                    this.account_data = response.data.data.put.data
                    this.page.total = response.data.data.put.total
                    this.page.size = response.data.data.put.per_page
                    this.page.current = response.data.data.put.current_page
                    this.s_list = response.data.data.status
                    this.dialog.apply_pay = response.data.data.merchant.bank_account
                    this.dialog.apply_name = response.data.data.merchant.account_name
                    this.dialog.apply_account = response.data.data.merchant.bank_number
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        },
        initMoney() {
            balanceInitMoney(this.id).then(response => {
                if (response.data.code === 0) {
                    this.money = response.data.data.total_tran_out_amount
                    this.Tmoney = response.data.data.total_balance
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        },
        applyShow(i, v){
            this.apply = true;
            
            // if(i !== 0){
            //     this.is_money = false;
            //     this.dialog.apply_money = v;
            //     balanceWitness(this.id ,i).then(response => {
            //         if (response.data.code === 0) {
            //             this.init()
            //             this.apply = false;
            //             this.dialog.apply_money = '';
            //             this.$Message.success(response.data.message);
            //         } else {
            //             this.$Message.error(response.data.message);
            //         }
            //     })
            // } else {
                this.is_money = true;
            // }
        },
        handleBalbnceSearch() {
            balanceSearch(this.id, this.searchForm).then(response => {
                if (response.data.code === 0) {
                    this.account_data = response.data.data.put.data
                    this.page.total = response.data.data.put.total
                    this.page.size = response.data.data.put.per_page
                    this.page.current = response.data.data.put.current_page
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        },
        handleBalbncePage(v) {
            balabcePage(this.id, v, this.searchForm).then(response => {
                if (response.data.code === 0) {
                    this.account_data = response.data.data.put.data
                    this.page.total = response.data.data.put.total
                    this.page.size = response.data.data.put.per_page
                    this.page.current = response.data.data.put.current_page
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        },
        handleBalbnceTimeStart(v) {
            this.searchForm.start = v
        },
        handleBalbnceTimeEnd(v) {
            this.searchForm.end = v
        },
        handleBalbnceMoney() {
            balanceMoney(this.id, this.dialog.apply_money).then(response => {
                if (response.data.code === 0) {
                    this.$Message.success(response.data.message)
                    this.initMoney()
                    this.init()
                    this.apply = false
                    this.$refs['dialog'].resetFields()
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        },
        handleUpdate(order_id, index) {
            balanceWitness(this.id, order_id).then(response => {
                if (response.data.code === 0) {
                    this.account_data[index].status = Number(response.data.data.status)
                } else {
                    this.$Message.error(response.data.message)
                }
            })
        }
    },
    mounted() {
        this.init(),
        this.initMoney()
    },
    computed: {
        ...mapGetters([
            'id'
        ])
    }
}
</script>

<style lang="less" scoped>
    @import '../balance.less';
</style>
